<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>亲子活动详情</title>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
</head>
<body>
    <!--fixed remove-->
    <section class="fixed" style="z-index:999;width: 100%;height: 100%;background-color: #000;position: fixed;left: 0;top: 0;"></section>
    <section class="detail_page">
        <div><img src="img/detail_01.jpg" width="100%" height="auto"></div>
        <div><img src="img/detail_02.jpg" width="100%" height="auto"></div>
        <div><img src="img/detail_03.jpg" width="100%" height="auto"></div>
        <div><img src="img/detail_04.jpg" width="100%" height="auto"></div>
        <div><img src="img/detail_05.jpg" width="100%" height="auto"></div>
        <div class="relative">
            <span class="change_btn gray_btn">1000积分兑换/已报名</span>
            <img src="img/detail_06.jpg" width="100%" height="auto">
        </div>
        <!--是否报名成功-->
        <div class="sign_up_box dno">
            <div class="wrap_box">
                <!--报名成功-->
                <span class="success dno">
                <span class="close"></span>
            </span>
                <span class="failed">
                <span class="close"></span>
            </span>
                <!--报名失败-->
            </div>
        </div>
    </section>
</body>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/common.js"></script>
<script>
    $(window).load(function () {
        touchEvent();
    });
    function touchEvent(){
        $('body').on('touchmove', function (event) {
            event.preventDefault();
        });
        $(".detail_page").on("touchmove", function (e){e.stopPropagation();});
    }

    //兑换按钮,弹层出现时,页面不可滚动
    $(".change_btn").on('click',function () {
        //touchEvent();
        $(".detail_page").css('overflow','hidden');
        $(".sign_up_box").show();
        $(".detail_page").css('height','100%');
    });


    //关闭报名成功,报名失败弹层
    $(".sign_up_box .close").on('click',function () {
        $(".detail_page").css({'height':'auto','overflow':'auto'});
        $(".sign_up_box").hide();
    });
</script>
</html>